<template>
  <div class="page-login">
    <van-nav-bar title="登 录"></van-nav-bar>
    <van-cell-group>
      <!-- 如果error-message的值有内容就会显示 -->
      <!-- 何时触发错误信息的显示？失去焦点或者点击登录按钮 -->
      <van-field @blur='validate("mobile")' :error-message='mobileError' v-model='loginForm.mobile' label="手机号" placeholder="请输入手机号" />
      <van-field @blur='validate("code")' :error-message='codeError' v-model='loginForm.code' label="验证码" placeholder="请输入验证码">
        <van-button class="p5" slot="button" size="mini" type="primary">
          发送验证码
        </van-button>
      </van-field>
    </van-cell-group>
    <div class="btn_box">
      <van-button :loading='loading' @click='handleLogin' type="info" block round>登 录</van-button>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data () {
    return {
      loading: false,
      mobileError: '',
      codeError: '',
      loginForm: {
        mobile: '13911111111',
        code: '246810'
      }
    }
  },
  methods: {
    ...mapActions('login', ['toLogin']),
    validate (type) {
      // 获取手机号或者验证码的值
      const value = this.loginForm[type]
      if (type === 'mobile') {
        // 验证手机号
        if (!value) {
          // 手机号非空验证
          this.mobileError = '手机号不能为空'
        } else if (!/^1[3-9]\d{9}$/.test(value)) {
          // 手机号格式验证
          this.mobileError = '手机号格式错误'
        } else {
          // 验证通过
          this.mobileError = ''
        }
      } else if (type === 'code') {
        // 验证码
        if (!value) {
          // 手机号非空验证
          this.codeError = '验证码不能为空'
        } else if (!/^\d{6}$/.test(value)) {
          // 验证码格式验证
          this.codeError = '验证码格式错误'
        } else {
          // 验证通过
          this.codeError = ''
        }
      }
    },
    async handleLogin () {
      // 实现表单验证
      this.validate('mobile')
      this.validate('code')
      if (!(this.mobileError === '' && this.codeError === '')) {
        // 其中之一没有验证通过，终止请求动作
        return
      }
      // 表单验证通过后控制按钮的状态
      this.loading = true
      // 处理登录流程
      const ret = await this.toLogin(this.loginForm)
      // console.log(ret)
      if (ret) {
        // 登录成功
        this.$router.push('/home')
      } else {
        // 登录失败
        this.$toast.fail('手机号或验证码错误')
        // 验证失败后可以再次点击按钮
        this.loading = false
      }
    }
  }
}
</script>
